<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>tab 栏切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font: 14px/1.4 "PingFang SC", Microsoft YaHei;
            background: #f5f5f5;
        }

        .tab {
            width: 600px;
            margin: 40px auto;
            background: #fff;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
        }

        .tab-nav ul {
            display: flex;
            list-style: none;
            background: #fafafa;
            border-bottom: 1px solid #e6e6e6;
        }

        .tab-nav a {
            display: block;
            padding: 0 24px;
            height: 46px;
            line-height: 46px;
            color: #333;
            text-decoration: none;
            transition: background .25s;
        }

        .tab-nav a.active {
            background: #fff;
            color: #e1251b;
            border-bottom: 2px solid #e1251b;
            font-weight: 600;
        }

        .tab-content {
            position: relative;
            height: 300px;
        }

        .tab-content .item {
            position: absolute;
            inset: 0;
            display: none;
            justify-content: center;
            align-items: center;
            font-size: 48px;
            color: #ccc;
        }

        .tab-content .item.active {
            display: flex;
        }

        .tab-content img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
    </style>
</head>

<body>
    <div class="tab">
        <nav class="tab-nav">
            <ul>
                <li><a href=" " class="active">百货</a></li>
                <li><a href="#">个护</a></li>
                <li><a href="#">预告</a></li>
                <li><a href="#">食品</a></li>
                <li><a href="#">母婴</a></li>
            </ul>
        </nav>

        <div class="tab-content">
            <div class="item active">
                <img src="img/蒂蒂2.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/小驴.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/特雷西亚.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/爱与恨德克萨斯.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/娜美.jpg" alt="">
            </div>
        </div>
    </div>

    <script>
        const ul = document.querySelector('.tab-nav ul');
        const items = document.querySelectorAll('.tab-content .item');

        ul.addEventListener('click', function (e) {
            if (e.target.tagName !== 'A') return;


            document.querySelector('.tab-nav .active').classList.remove('active');
            e.target.classList.add('active');


            const idx = Array.from(ul.children).indexOf(e.target.parentElement);
            document.querySelector('.tab-content .active').classList.remove('active');
            items[idx].classList.add('active');
        });
    </script>
</body>

</html>